<template>
  <div class="bg-white flex flex-col mt-4">
    <div class="w-[350px] m-auto flex flex-col md:w-[1440px] md:m-auto">
      <img :src="eventReview.coverImage" />
      <div class="m-auto w-[1040px]">
        <div class="text-[34px] text-primary font-bold leading-[40px] mt-[40px]">
          {{ eventReview.title }}
        </div>
        <div class="text-[22px] leading-[25px] mt-[20px]">
          {{ eventReview.summary }}
        </div>
        <div class="border-b-[2px] border-lineColorGrey py-[8px]"></div>
        <div class="py-[32px]" v-html="eventReview.content"></div>
      </div>
      <!-- 评论区 -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { contentDetailApi } from '@/api/content'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const eventReview = ref({} as any)

const cid = route.query.cid as string

const getEventReviewDetail = async () => {
  const res: any = await contentDetailApi(cid, 'view')
  if (res.code === 0 && res.data) {
    eventReview.value = res.data
  }
}

onMounted(() => {
  getEventReviewDetail()
})
</script>

<style scoped>
</style>
